<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>定时任务管理</title>
    <style>
        #myModal {
            background: white;
            color: red;
            display: block;
            margin:auto;
        }

    </style>
    <script type="application/javascript" src="assets/js/http.js"></script>
</head>
<body>
<div ng-app="myApp" class="container" ng-controller="TaskCtrl" ng-init="init();" >
    <div class="row">
        <div class="col-md-4">
            <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal">可选任务</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-11">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>任务名</th>
                    <th>任务组</th>
                    <th>触发器</th>
                    <th>触发器组</th>
                    <th>运行状态</th>
                    <th>CronExpression</th>
                    <th>操作</th>
                    <th><span  class="panel-collapse collapse">类名</span></th>
                    <th><span  class="panel-collapse collapse">上次触发</span></th>
                    <th><span  class="panel-collapse collapse">下次触发</span></th>
                    <th><span  class="panel-collapse collapse">描述</span></th>
                 </tr>
                </thead>
                <tbody>
                <tr ng-repeat="task in dbTasks">
                    <td>{{task.jobName}}</td>
                    <td>{{task.jobGroupName}}</td>
                    <td>{{task.triggerName}}</td>
                    <td>{{task.triggerGroupName}}</td>
                    <td ng-switch="task.triggerState">
                        <span ng-switch-when="NONE">无</span>
                        <span ng-switch-when="NORMAL">正常</span>
                        <span ng-switch-when="PAUSED">暂停</span>
                        <span ng-switch-when="COMPLETE">完成</span>
                        <span ng-switch-when="ERROR">错误</span>
                        <span ng-switch-when="BLOCKED">阻塞</span>
                    </td>
                    <td>{{task.cronExpression}}</td>
                    <td >

                        <button type="button" class="btn btn-primary" ng-click="startJob(task)" ng-show="showStart($index)">启动</button>
                        <button type="button" class="btn btn-primary" ng-click="startJob(task)" ng-show="showConfig($index)">配置</button>
                        <button type="button" class="btn btn-primary" ng-click="pauseJob(task)" ng-show="showPause($index)">暂停</button>
                        <button type="button" class="btn btn-primary" ng-click="removeJob(task)">移除</button>
                    </td>
                    <td><span class="panel-collapse collapse">{{task.className}}</span></td>
                    <td><span class="panel-collapse collapse">{{task.previousFireTime | date:'yyyy-MM-dd HH:mm:ss'}}</span></td>
                    <td><span class="panel-collapse collapse">{{task.nextFireTime | date:'yyyy-MM-dd HH:mm:ss'}}</span></td>
                    <td><span class="panel-collapse collapse">{{task.description}}</span></td>
                 </tr>
                </tbody>
            </table>

        </div>
        <div class="col-md-1">
            <a   data-toggle="collapse" data-parent="#accordion" data-target=".collapse">》展开》</a>
        </div>
    </div>
    <div class="row">
        <div class="modal hide" id="myModal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3>定时任务列表</h3>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>任务名</th>
                            <th>任务组</th>
                            <th>触发器</th>
                            <th>触发器组</th>
                            <th>类名</th>
                            <th>CronExpression</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="task in tasks">
                            <td>{{task.jobName}}</td>
                            <td>{{task.jobGroupName}}</td>
                            <td>{{task.triggerName}}</td>
                            <td>{{task.triggerGroupName}}</td>
                            <td>{{task.className}}</td>
                            <td>{{task.cronExpression}}</td>
                            <td>
                                <button type="button" class="btn btn-primary" ng-click="addJob(task)">加入</button>
                                <button type="button" class="btn btn-primary" ng-click="addAndScheduleJob(task)">直接启动</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="modal hide" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="messageModel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">提示：</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">{{message}}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
    <div class="row">
        <div class="modal hide" tabindex="-1" role="dialog" id="editCronModel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">触发规则</h4>
                    </div>
                    <div class="modal-body">
                        <form name="trigger">
                            <div class="form-group">
                                <label for="triggerName">触发器名</label>
                                <input type="text" class="form-control" id="triggerName" name="triggerName" ng-model="editedTask.triggerName" placeholder="job1_trigger" required>
                                <span style="color:red" ng-show="trigger.triggerName.$dirty && trigger.triggerName.$invalid"><span ng-show="trigger.triggerName.$error.required">触发器名是必须的。</span></span>
                            </div>
                            <div class="form-group">
                                <label for="triggerGroupName">触发器组</label>
                                <input type="text" class="form-control" id="triggerGroupName" name="triggerGroupName" ng-model="editedTask.triggerGroupName" placeholder="triggerGroup1" required>
                                <span style="color:red" ng-show="trigger.triggerGroupName.$dirty && trigger.triggerGroupName.$invalid"><span ng-show="trigger.triggerGroupName.$error.required">触发器是必须的。</span></span>
                            </div>
                            <div class="form-group">
                                <label for="cronExpression">cronExpress: 每隔5秒执行一次：*/5 * * * * ?</label>
                                <input type="text" class="form-control" id="cronExpression" name="cronExpression" ng-model="editedTask.cronExpression" placeholder="*/5 * * * * ?" required>
                                <span style="color:red" ng-show="trigger.cronExpression.$dirty && trigger.cronExpression.$invalid"><span ng-show="trigger.cronExpression.$error.required">cronExpress是必须的。</span></span>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary" ng-click="scheduleJob()" ng-disabled=" trigger.triggerName.$invalid || trigger.triggerGroupName.$invalid|| trigger.cronExpression.$invalid" >提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="application/javascript" src="assets/js/task.js"></script>

</body>
</html>
